import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import My from '../my'
import CharmWanrong from '../charmWanrong'
import Servicess from '../servicess'


export default class Home extends React.Component<any, any> {
    state = {
        selectedTab: 'redTab',
    };

    renderContent(pageText: any) {
        return (
            <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
                <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
                    onClick={(e) => {
                        e.preventDefault();
                        this.setState({

                        });
                    }}
                >
                    Click to show/hide tab-bar
                </a>
                <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
                    onClick={(e) => {
                        e.preventDefault();
                        this.setState({

                        });
                    }}
                >
                    Click to switch fullscreen
                </a>
            </div>
        );
    }
    render() {
        return <div className='home'>
            {/* 渲染子路由 */}
            <Route path='/homess/servicess' component={Servicess} />
            <Route path='/homess/charmWanrong' component={CharmWanrong} />
            <Route path='/homess/my' component={My} />

            <TabBar
                tintColor="#21b97a"
                barTintColor="white"
                noRenderContent={true}
            >
                <TabBar.Item
                    title="首页"
                    key="Life"
                    icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(http://cdn.yzf7.cn/2021/09/03/067e09eef58ff.svg) center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(http://cdn.yzf7.cn/2021/09/03/067e09eef58ff.svg) center center /  21px 21px no-repeat'
                    }}
                    />
                    }
                    selected={this.state.selectedTab === 'blueTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'blueTab',
                        });

                        //   路由切换
                        this.props.history.push('/Homess')

                    }}
                    data-seed="logId"
                >

                </TabBar.Item>
                <TabBar.Item
                    icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(http://cdn.yzf7.cn/2021/09/03/4fc67d0b802d0.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(http://cdn.yzf7.cn/2021/09/03/4fc67d0b802d0.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    title="魅力万荣"
                    key="Koubei"
                    selected={this.state.selectedTab === 'redTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'redTab',
                        });

                        //   路由切换
                        this.props.history.push('/charmWanrong')
                    }}
                    data-seed="logId1"
                >

                </TabBar.Item>
                <TabBar.Item
                    icon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(http://cdn.yzf7.cn/2021/09/03/7d30eb242d30c.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    selectedIcon={
                        <div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(http://cdn.yzf7.cn/2021/09/03/7d30eb242d30c.svg) center center /  21px 21px no-repeat'
                        }}
                        />
                    }
                    title="服务"
                    key="Friend"
                    selected={this.state.selectedTab === 'greenTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'greenTab',
                        });
                        //   路由切换
                        this.props.history.push('/servicess')
                    }}
                >

                </TabBar.Item>
                <TabBar.Item
                    icon={{ uri: 'http://cdn.yzf7.cn/2021/09/03/3f0b88afb1555.svg' }}
                    selectedIcon={{ uri: 'http://cdn.yzf7.cn/2021/09/03/3f0b88afb1555.svg' }}
                    title="我的"
                    key="my"
                    selected={this.state.selectedTab === 'yellowTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'yellowTab',
                        });
                        //   路由切换
                        this.props.history.push('/my')
                    }}
                >

                </TabBar.Item>
            </TabBar>
        </div>
    }
}
